<template>
  <section>
    <div class="index-inner">
      <div class="index-left">
        <div class="left-top">
          <div class="title">全部产品</div>
          <div class="content" v-for="pdt in products">
            <h3>{{pdt.title}}</h3>
            <ul v-for="item in pdt.list">
              <a :href="item.url">
                <li>{{item.name}}<span class="hot" v-if="item.hot">HOT</span></li>
              </a>
            </ul>
            <div class="line" v-if="!pdt.last"></div>
          </div>
        </div>
        <div class="left-bottom">
          <div class="title">最新消息</div>
          <ul>
            <li v-for="item in news">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="index-right">
        <div class="slide-show">
          <slide :slides="slides" :inv="3000"></slide>
        </div>
        <div class="board-list">
          <div class="list-item" v-for="item in projects">
            <div class="item-inner">
              <img class="item-img" :src="item.img" />
              <div class="item-info">
                <h2>{{item.title}}</h2>
                <p>{{item.content}}</p>
                <div class="board-button">
                  <a :href="item.url">立即购买</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import Slide from '../components/Slide.vue'

  //引入组件
  @Component({
    components: {
      'slide' : Slide
    }
  })
  export default class Index extends Vue {
    // 全部产品
    products = [{
      title : 'PC产品',
      last : false,
      list : [{
        name : '数据统计',
        url : '/detail/analysis',
        hot : false
      },{
        name : '数据预测',
        url : '/detail/forecast',
        hot : false
      },{
        name : '流量分析',
        url : '/detail/count',
        hot : true
      },{
        name : '广告发布',
        url : '/detail/publish',
        hot : false
      }]
    },{
      title : '手机应用类',
      last : true,
      list : [{
        name : '91助手',
        url : 'http://zs.91.com/',
        hot : false
      },{
        name : 'PP助手',
        url : 'http://pro.25pp.com/',
        hot : true
      },{
        name : '智能地图',
        url : 'https://baike.baidu.com/item/%E6%99%BA%E8%83%BD%E5%9C%B0%E5%9B%BE/17345307?fr=aladdin',
        hot : false
      },{
        name : '团队语音',
        url : 'https://cloud.tencent.com/product/GVoice?fromSource=gwzcw.186153.186153.186153',
        hot : false
      }]
    }]

    //最新消息
    news = [{
      name : '新闻条目1',
      url : ''
    },{
      name : '新闻条目2',
      url : ''
    },{
      name : '新闻条目3',
      url : ''
    },{
      name : '新闻条目4',
      url : ''
    },{
      name : '新闻条目5',
      url : ''
    }]

    //所有项目
    projects = [{
      img :  '../../static/assets/Icon1.png',
      title : '数据统计',
      url : '/detail/analysis',
      content : '数据统计是一款数据统计产品'
    },{
      img :  '../../static/assets/Icon2.png',
      title : '数据预测',
      url : '/detail/forecast',
      content : '数据预测帮助你的产品更好地找到定位'
    },{
      img :  '../../static/assets/Icon3.png',
      title : '流量分析',
      url : '/detail/count',
      content : '流量分析快速迭代永远保持最前端的速度'
    },{
      img :  '../../static/assets/Icon4.png',
      title : '广告发布',
      url : '/detail/publish',
      content : '帮你勇闯高峰，到达事业的顶峰'
    }]

    //轮播图
    slides = [{
      img : '../../static/assets/banner1.jpg',
      title : 'banner1',
      href : ''
    },{
      img : '../../static/assets/banner2.jpg',
      title : 'banner2',
      href : ''
    },{
      img : '../../static/assets/banner3.jpg',
      title : 'banner3',
      href : ''
    },{
      img : '../../static/assets/banner4.jpg',
      title : 'banner4',
      href : ''
    }]
  }
</script>

<style lang="scss" scoped>
  .index-inner{
    width: 100%;
    min-height:750px;
    font-size: 14px;
    margin: 1% auto;
    display: flex;
    flex-direction: row;

    .index-left{
      width: 24%;
      margin-right: 1%;

      .left-top{
        width: 100%;
        margin-bottom: 6%;
        background: #fff;

        .title{
          background: #4fc08d;
          color: #fff;
          padding: 10px 15px;
          margin-bottom: 10px;
        }

        .content{
          h3{
            padding: 15px;
            font-weight: bold;
            color: #222;
          }

          ul{
            list-style: none;
            padding: 0 15px 10px 15px;
            a {
              text-decoration: none;
              color: #222;

              li{
                cursor: pointer;
                padding: 5px;

                .hot{
                  background: red;
                  color: #fff;
                  font-weight: bold;
                  font-size: 12px;
                  padding: 2px 5px;
                  margin-left: 10px;
                  border-radius: 5px;
                }
              }
            }
          }

          .line{
            height: 1px;
            width: 100%;
            background: #ddd;
          }
        }
      }

      .left-bottom{
        width: 100%;
        height:48%;
        background: #fff;

        .title{
          background: #4fc08d;
          color: #fff;
          padding: 10px 15px;
          margin-bottom: 10px;
        }

        ul{
          list-style: none;
          min-height: 323px;
          padding: 0 15px 10px 15px;

          li{
            cursor: pointer;
            padding: 10px 5px;
          }
        }
      }
    }

    .index-right{
      width: 75%;

      .slide-show{
        width: 100%;
        height: 450px;
        margin-bottom: 2%;
      }

      .board-list{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;

        .list-item{
          width: 49%;
          margin-bottom: 2%;
          background: #fff;

          .item-inner{
            padding: 4% 3%;
            display: flex;
            flex-direction: row;
            align-items: center;

            .item-img{
              width: 100px;
              height: 100px;
              margin-right: 7%;
            }

            .item-info{
              min-height: 120px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              h2{
                font-size: 18px;
                font-weight: bold;
                color: #000;
                margin-bottom: 15px;
              }

              .board-button{
                margin-top: 20px;
                cursor: pointer;

                a{
                  text-decoration: none;
                  background: #4fc08d;
                  color: #fff;
                  display: inline-block;
                  padding: 10px 20px;
                  cursor: pointer;
                  border-radius: 4px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
